<template>
   <div class="container" >
    <button class="open" @click="open('666!')">open</button>
    <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
    :before-close="handleClose"
  >
    <span>{{ contents }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
   </div>
</template>
<script>
import { reactive, toRefs,ref } from 'vue'
import { ElMessageBox } from 'element-plus'
   export default {
     name: '',
     data: function(){
       return {
        
       }
     },
     methods:{
     },
     setup(){
        const state = reactive({
            dialogVisible:false,
            contents:''
        });
        // var dialogVisible = ref(false);
        const handleClose = (done)=> {
            ElMessageBox.confirm('Are you sure to close this dialog?')
                .then(() => {
                    done()
                })
                .catch(() => {
                // catch error
                })
        }
        const open = (msg)=>{
            state.dialogVisible = true;
            state.contents=msg
            // dialogVisible=true;
        }
        return{
            ...toRefs(state),
            // dialogVisible,
            handleClose,
            open,
        }
     }
   }
</script>
<style>
  html,
  body, 
  #app{
    height: 100%;
  }
</style>
<style scoped>
   .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-color: aliceblue;
   }
   .tr{
      width: 200px;
      flex-basis: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: beige;
      align-items: center;
    }
   .second{
      background-color: aqua;
   }
</style>